<@override name="content">
    <div class="header">
      <h1 class="page-title">题目列表</h1>
    </div>
    <ul class="breadcrumb">
      <li>
        <a href="admin">首页</a>
        <span class="divider">/</span>
      </li>
      <li class="active">题目管理</li>
    </ul>
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="well">
          <div id="container">
            <table id="problem-list" class="table table-hover table-striped cf basetable dataTable" cellpadding="0" cellspacing="0" border="0" width="100%">
              <thead>
                <tr>
                  <th width="5%">ID</th>
                  <th width="45%">Title</th>
                  <th width="5%">AC</th>
                  <th width="5%">Submit</th>
                  <th width="15%">Date</th>
                  <th width="15%">Action</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
   </@override>

  <@override name="styles">
    <link href="assets/jquery.artDialog/skins/twitter.css" rel="stylesheet" type="text/css">
  </@override>

    <@override name="scripts">
    <link href="assets/DataTables-1.9.4/media/css/dataTables.bootstrap.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="assets/DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
    <script type="text/javascript" src="assets/js/dataTables.bootstrap.js"></script>

    <script src="assets/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
    <script src="assets/jquery.artDialog/jquery.artDialog.js"></script>

    <script type="text/javascript">
      var oTable = $('#problem-list').jfinalDataTable({
            "sAjaxSource": "${baseUrl!}/api/admin/problemList",
            "aoColumns": [
                { "mData": "pid",
                  "mRender": function (data, type, full) {
                    return '<a href="problem/show/' + full.pid + '" target="_blank">' + data + '</a>';
                  }
                },
                { "mData": "title",
                  "sClass": "title",
                  "mRender": function (data, type, full) {
                    return '<a href="admin/problem/show/' + full.pid + '">' + data + '</a> '
                      + (full.status ? '' : '<span class="status-label label label-important">Disabled</span>');
                  }
                },
                { "mData": "accepted",
                  "mRender": function (data, type, full) {
                    return '<a href="status/?pid=' + full.pid + '&result=0" target="_blank">' + data + '</a>';
                  }
                },
                { "mData": "submission",
                  "mRender": function (data, type, full) {
                    return '<a href="status/?pid=' + full.pid + '" target="_blank">' + data + '</a>';
                  }
                },
                { "mData": "ctime",
                  "mRender": function (data, type, full) {
                    return parseTimestamp(data);
                   }
                },
                { "mData": null,
                  "bSortable": false,
                  "mRender": function (data, type, full) {
                    var action = '<a href="admin/problem/edit/' + full.pid 
                        + '" class="btn btn-success">Edit</a> '
                        + '<a href="admin/problem/data/' + full.pid 
                        + '" class="btn btn-info">Data</a> '
                        + '<button pid="' + full.pid 
                        + '" class="btn btn-danger problem-rejudge">Rejudge</button> '
                        + '<button pid="' + full.pid
                        + '" data-next-status="' + !full.status + '"'
                        + ' class="btn btn-' + (full.status ? 'warning' : 'primary') + ' problem-toggle">' 
                        + (full.status ? 'Disable' : 'Enable')
                        + '</button> ';
                    return action;
                  }
                }
            ]
        });

    $('table').on('click', '.problem-toggle', function() {
      var that = $(this);
      var status = that.data('next-status');
      var action = (status || status == 'true' ? 'Enable' : 'Disable');
        $.dialog({
          title: action + ' this problem',
          content: 'Are you sure?',
          cancelVal: 'Cancel',
          cancel: true,
          okVal: action,
          ok: function() {
            $.post('api/admin/updateProblem', {pk:that.attr('pid'), name: 'status', value: status}, function(data) {
                status = !status;
                that.data('next-status', status);
                that.removeClass().addClass('btn btn-' + (status ? 'primary' : 'warning') + ' problem-toggle');
                that.html(status ? 'Enable' : 'Disable');
                var title_td = that.parent().siblings('td.title');
                if (status) {
                  title_td.append('<span class="status-label label label-important">Disabled</span>');
                } else {
                  title_td.children('.status-label').remove();
                }
            });
            this.close();
            return false;
          }
        });
    });
    </script>
 </@override>
<@extends name="../_layout.html"></@extends>
